// 控制台组件
import { formatRelativeTime, truncateText } from '../modules/utils.js';

const dashboardComponent = {
    template: `<div class="container dashboard-container">
        <div class="dashboard-header">
            <h2 class="text-center">控制台</h2>
        </div>
        <div class="dashboard-stats">
            <div class="stat-card">
                <div class="stat-label">用户</div>
                <div class="stat-number">{{ userCount }}</div>
            </div>
            <div class="stat-card">
                <div class="stat-label">文章</div>
                <div class="stat-number">{{ postCount }}</div>
            </div>
            <div class="stat-card">
                <div class="stat-label">分类</div>
                <div class="stat-number">{{ categoryCount }}</div>
            </div>
            <div class="stat-card">
                <div class="stat-label">评论</div>
                <div class="stat-number">{{ commentCount }}</div>
            </div>
        </div>
        <div class="dashboard-content">
            <div class="recent-section container">
                <h3>最新文章</h3>
                <div v-if="loading" class="loading">加载中...</div>
                <div v-else>
                    <div class="post-item" v-for="post in recentPosts" :key="post.id">
                        <h4 class="post-title">{{ post.title }}</h4>
                        <div class="post-meta">作者: {{ post.author }} | {{ formatRelativeTime(post.createdAt) }}</div>
                        <div class="post-excerpt">{{ truncateText(post.content, 100) }}</div>
                    </div>
                    <div v-if="recentPosts.length === 0">暂无文章</div>
                </div>
            </div>
            <div class="recent-section container">
                <h3>最新评论</h3>
                <div v-if="loading" class="loading">加载中...</div>
                <div v-else>
                    <div class="comment-item" v-for="comment in recentComments" :key="comment.id">
                        <div class="comment-section">{{ truncateText(comment.content, 100) }}</div>
                        <div class="comment-meta">
                            <span>作者: {{ comment.author }}</span>
                            <span>{{ formatRelativeTime(comment.createdAt) }}</span>
                        </div>
                    </div>
                    <div v-if="recentComments.length === 0">暂无评论</div>
                </div>
            </div>
        </div>
    </div>`,
    props: ['appModule'],
    data() {
        return { loading: false };
    },
    computed: {
        userCount() {
            return this.appModule && this.appModule.userModule && this.appModule.userModule.users ?
                this.appModule.userModule.users.length : 0;
        },
        postCount() {
            return this.appModule && this.appModule.postModule && this.appModule.postModule.posts ?
                this.appModule.postModule.posts.length : 0;
        },
        categoryCount() {
            return this.appModule && this.appModule.categoryModule && this.appModule.categoryModule.categories ?
                this.appModule.categoryModule.categories.length : 0;
        },
        commentCount() {
            return this.appModule && this.appModule.commentModule && this.appModule.commentModule.comments ?
                this.appModule.commentModule.comments.length : 0;
        },
        recentPosts() {
            return this.appModule ? this.appModule.getRecentPosts(5) : [];
        },
        recentComments() {
            return this.appModule ? this.appModule.getRecentComments(5) : [];
        }
    },
    methods: {
        formatRelativeTime,
        truncateText
    }
};

export { dashboardComponent };